import React from 'react'

import './index.scss'

import Router from 'next/router'
import PropTypes from 'prop-types';
import store from '../../store'

export default class Navigation extends React.Component{
    constructor(props) {
        super(props);
        let {NavigationList} = store.getState()
        this.state = {
            NavigationList
        }
    }
    static getDerivedStateFromProps(nextProps) {
        let displayNav = nextProps.displayNav
        let navFrag = nextProps.navFrag
        return {
            displayNav,
            navFrag
        }
    }
    render() {
        return(
            <>

                {
                        <nav className={`navigation ${this.state.displayNav?'show_navigation':'moving'}  ${this.state.navFrag?'show':''} `} >
                            <div className='navigation_tit'>
                                <img className='nav_logo' src="/static/indexImg/di_logo@2x.png" alt=""/>
                            </div>
                            <ul className='navigation_list'>
                                {
                                    this.state.NavigationList.map((item,index) => {
                                        return (
                                            <li className='navigation_item' key={index} onClick={this.goToNewsPages.bind(this,item.info)}>
                                                <img className='navigation_icon' src={item.navIcon} alt=""/>
                                                <span>{item.info}</span>
                                                {
                                                    item.arrow &&  <img className='navigation_arrow fr' src={item.arrow} alt=""/>
                                                }
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </nav>
                }

            </>

        )
    }
    goToNewsPages(data){
        let newsPageUrl;
        switch (data){
            case '首页':
                newsPageUrl = '/'
                break;
            case '产品及服务':
                newsPageUrl = '/service'
                break;
            case '经典案例':
                newsPageUrl = '/case'
                break;
            case '关于我们':
                newsPageUrl = '/about'
                break;
            case '新闻中心':
                newsPageUrl = '/newsCenter'
                break;
            case '联系我们':
                newsPageUrl = '/contactGp'
                break;
        }
        Router.push({pathname: newsPageUrl})
    }
}
Navigation.propTypes = {
    displayNav : PropTypes.bool
}